<template>
<div class="apps-nav xdh-nav-tabs" style="">
  <el-tabs class="xdh-nav-tabs__tabs" type="card"   
    @tab-click="tabClickHandle" 
    @tab-remove="tabRemoveHandle"
  >
    <el-tab-pane v-for="(item, index) in appsArray" 
      :key="`${item.name}_${index}`" :closable="item.closable" 
      :name="item.name" :label="item.label"
      :class="{'active': !item.closed}"
    >
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<style lang="scss" scoped>
.apps-nav{
  box-sizing: border-box;
}
.apps-nav.xdh-nav-tabs{
  font-size: 0;
  width: auto;
  display:block;
  float:left;
}
</style>

<script>
import {mapState} from 'vuex'
export default {
  name: 'appsNav',
  components: {
  },
  props: {
    list: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
    }
  },
  computed: {
     ...mapState('apps', {
      'appsArray': 'appsArray'
    })
  },
  watch: {
    
  },
  methods: {
    tabClickHandle(tab) {
      console.log('open', tab.name)
      this.$store.commit('apps/toggleApp', tab.name)
      // this.$emit('on-tab-click', tab.name)
    },
    tabRemoveHandle(tab) {
       console.log('remove', tab)
       this.$store.commit('apps/removeApp', tab)
      // this.$emit('on-tab-remove', tab)
    }
  },
  mounted() {
  }
}
</script>

